<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(str,i) in listImg">
        <img style="width:100%" :src="str.url" alt="" @click="banner(i)">
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
export default {
  props: ["listImg"],
  mounted() {
    let mySwiper = new Swiper(".swiper-container", {
      autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: false
      },
      loop: true,
      pagination: {
        el: ".swiper-pagination",
        clickable: true
      }
    });
  },
  methods: {
    banner(i) {
      console.log(i);
    }
  }
};
</script>

<style lang="less">
//可自定义当前banneractive样式
.swiper-pagination-bullet-active {
  opacity: 1;
  width: 0.9rem;
  border-radius: 0.3rem;
}
</style>